<!DOCTYPE html>
<html lang=""><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1">


<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">



  <meta name="description" content="JavaScript执行window.print()打印内容为空白">




  <meta name="keywords" content="CSS,HTML,JavaScript,">





  <link rel="alternate" href="https://huangyijie.com/atom.xml" title="黄奕杰">




  <link rel="shortcut icon" type="image/x-icon" href="https://huangyijie.com/favicon.ico?v=1.1">



<link rel="canonical" href="https://huangyijie.com/2016/10/08/js-window-print-blank/">


<meta name="description" content="今天写代码的时候，需要用到打印页面的功能，按理说只要很简单的一段js代码就可以了： 1window.print(); 但是很奇怪，怎么执行，要打印的页面内容都是空白！ 于是一步一步分析，终于找到了罪魁祸首的代码片段： 12345@media print &amp;#123;    body * &amp;#123;        visibility: hidden;    &amp;#125;&amp;#125; 这段 CSS">
<meta name="keywords" content="CSS,HTML,JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript执行window.print()打印内容为空白">
<meta property="og:url" content="https://huangyijie.com/2016/10/08/js-window-print-blank/index.html">
<meta property="og:site_name" content="黄奕杰">
<meta property="og:description" content="今天写代码的时候，需要用到打印页面的功能，按理说只要很简单的一段js代码就可以了： 1window.print(); 但是很奇怪，怎么执行，要打印的页面内容都是空白！ 于是一步一步分析，终于找到了罪魁祸首的代码片段： 12345@media print &amp;#123;    body * &amp;#123;        visibility: hidden;    &amp;#125;&amp;#125; 这段 CSS">
<meta property="og:locale" content="en">
<meta property="og:updated_time" content="2017-09-02T09:45:37.828Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JavaScript执行window.print()打印内容为空白">
<meta name="twitter:description" content="今天写代码的时候，需要用到打印页面的功能，按理说只要很简单的一段js代码就可以了： 1window.print(); 但是很奇怪，怎么执行，要打印的页面内容都是空白！ 于是一步一步分析，终于找到了罪魁祸首的代码片段： 12345@media print &amp;#123;    body * &amp;#123;        visibility: hidden;    &amp;#125;&amp;#125; 这段 CSS">


<link rel="stylesheet" type="text/css" href="dic_files/style.css">
<link href="dic_files/css.css" rel="stylesheet">





<script type="text/javascript">
  var themeConfig = {
    fancybox: {
      enable: false
    },
  };
</script>




  



    <title> JavaScript执行window.print()打印内容为空白 - 黄奕杰 </title>
  <script async="" type="text/javascript" src="dic_files/embed.js"></script><link rel="preload" as="style" href="dic_files/a_data/lounge.css"><link rel="preload" as="script" href="dic_files/a_data/common.js"><link rel="preload" as="script" href="dic_files/a_data/lounge.js"><link rel="preload" as="script" href="dic_files/a_data/config.js"></head>

  <body>
    <div id="page">
      <header id="masthead"><div class="site-header-inner">
    <h1 class="site-title">
        <a href="https://huangyijie.com/" class="logo">黄奕杰</a>
    </h1>

    <nav id="nav-top">
        
            <ul id="menu-top" class="nav-top-items">
                
                    <li class="menu-item">
                        <a href="https://huangyijie.com/about">
                            
                            
                                About
                            
                        </a>
                    </li>
                
            </ul>
        
  </nav>
</div>

      </header>
      <div id="content">
        
    <div id="primary">
        
  <article class="post">
    <header class="post-header">
      <h1 class="post-title">
        
          JavaScript执行window.print()打印内容为空白
        
      </h1>

      <time class="post-time">
          Oct 8 2016
      </time>
    </header>



    
            <div class="post-content">
            <p>今天写代码的时候，需要用到打印页面的功能，按理说只要很简单的一段js代码就可以了：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">window</span>.print();</div></pre></td></tr></tbody></table></figure>
<p>但是很奇怪，怎么执行，要打印的页面内容都是空白！</p>
<p>于是一步一步分析，终于找到了罪魁祸首的代码片段：</p>
<figure class="highlight css"><table><tbody><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">media</span> print {</div><div class="line">    <span class="selector-tag">body</span> * {</div><div class="line">        <span class="attribute">visibility</span>: hidden;</div><div class="line">    }</div><div class="line">}</div></pre></td></tr></tbody></table></figure>
<p>这段 CSS 的作用就是当媒体类型为 print 的时候，body 里面所有元素都采用样式 “<strong>visibility: hidden;</strong>”，所以解决这个问题是<br>把 “<strong>visibility: hidden;</strong>” 去掉就可以了。</p>
<p>但是这里有两点可以说：</p>
<ol>
<li>写代码的时候，一个模块的功能不能影响到全局，这是谨慎也是需要第一位考虑的做法；</li>
<li>CSS 的 Media Type</li>
</ol>
<h3 id="Media-Type"><a href="#Media-Type" class="headerlink" title="Media Type"></a>Media Type</h3><h4 id="Media-Type-种类"><a href="#Media-Type-种类" class="headerlink" title="Media Type 种类"></a>Media Type 种类</h4><p><strong>Media Type</strong> 直译过来就是<strong>媒体类型</strong>，这是CSS2引入的属性，可以通过 <strong>@media</strong> 等方式给不同的媒体类型定义不同的CSS样式规则。上面讲到的，我在<strong>打印</strong>页面的时候，所处的媒体类型就是 <strong>print</strong>，一般我们在浏览网页的时候，媒体类型是 <strong>screen</strong>，W3C给出的媒体类型有以下十种（<strong>注意，名字是大小写敏感的</strong>）：</p>
<ol>
<li><strong>all</strong><br>适用于所有设备。</li>
<li><strong>braille</strong><br>用于盲文触觉反馈设备。</li>
<li><strong>embossed</strong><br>用于分页盲文打印机。</li>
<li><strong>handheld</strong><br>用于手持设备（通常是指有限带宽的小屏设备）。</li>
<li><strong>print</strong><br>用于分页材料和打印预览模式下在屏幕上查看的文档。</li>
<li><strong>projection</strong><br>用于投影机。</li>
<li><strong>screen</strong><br>主要用于彩色计算机屏幕。</li>
<li><strong>speech</strong><br>用于语音合成设备。</li>
<li><strong>tty</strong><br>适用于使用固定间距字符网格（如电传打字机，终端，或具有有限显示能力的便携式设备）的媒体。在“tty”类型中不应该使用像素单元。</li>
<li><strong>tv</strong><br>用于电视类设备（分辨率低，彩色，有限可滚动屏幕，有声音的）。</li>
</ol>
<h4 id="Media-Type-引入方式"><a href="#Media-Type-引入方式" class="headerlink" title="Media Type 引入方式"></a>Media Type 引入方式</h4><p>Media Type 有多种引入方式。</p>
<ol>
<li><p>@media方式引入</p>
<figure class="highlight css"><table><tbody><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">media</span> print{</div><div class="line">  <span class="selector-tag">body</span> * {</div><div class="line">    <span class="attribute">visibility</span>: hidden;</div><div class="line">  }</div><div class="line">}</div></pre></td></tr></tbody></table></figure>
<p> 这种方式在 CSS 文件中 和 style 标签里都可以使用。</p>
</li>
<li><p>@import方式引入</p>
<figure class="highlight css"><table><tbody><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">import</span> url(<span class="string">"css/print.css"</span>) print;</div></pre></td></tr></tbody></table></figure>
<p> 和上一种一样，这种方式在 CSS 文件中 和 style 标签里都可以使用。</p>
</li>
<li><p>link方法引入</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">"../css/print.css"</span> <span class="attr">media</span>=<span class="string">"print"</span> /&gt;</span></div></pre></td></tr></tbody></table></figure>
</li>
<li><p>xml方式引入</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？&gt;</div></pre></td></tr></tbody></table></figure>
</li>
</ol>

            </div>
          

    
      <footer class="post-footer">
        <div class="post-tags">
          
            <a href="https://huangyijie.com/tags/CSS/">CSS</a>
          
            <a href="https://huangyijie.com/tags/HTML/">HTML</a>
          
            <a href="https://huangyijie.com/tags/JavaScript/">JavaScript</a>
          
        </div>

        
        
  <nav class="post-nav">
    
      <a class="prev" href="https://huangyijie.com/2017/06/21/use-editorconfig/">
        <i class="iconfont icon-left"></i>
        <span class="prev-text nav-default">使用EditorConfig</span>
        <span class="prev-text nav-mobile">Prev</span>
      </a>
    
    
      <a class="next" href="https://huangyijie.com/2016/10/05/blog-with-github-travis-ci-and-coding-net-2/">
        <span class="next-text nav-default">使用Github、Travis-CI和Coding.net自动部署博客［二］</span>
        <span class="prev-text nav-mobile">Next</span>
        <i class="iconfont icon-right"></i>
      </a>
    
  </nav>

        
  <div class="comments" id="comments">
    
    <div style="text-align:center;">
        
    </div>
      <div id="disqus_thread"><iframe id="dsq-app4498" name="dsq-app4498" allowtransparency="true" scrolling="no" tabindex="0" title="Disqus" style="width: 1px !important; min-width: 100% !important; border: medium none !important; overflow: hidden !important; height: 0px !important;" src="dic_files/a.html" horizontalscrolling="no" verticalscrolling="no" width="100%" frameborder="0"></iframe><div dir="ltr" style="overflow: hidden;"><div style="height: 52px; width: 54px; margin: 0px auto; overflow: hidden; position: relative; background: rgba(0, 0, 0, 0) url(&quot;https://c.disquscdn.com/next/embed/assets/img/loader-bg.173909e4737a7481df14d5492b5eeb48.png&quot;) no-repeat scroll 0% 0%; box-sizing: border-box;"><div style="box-sizing: border-box; width: 26px; height: 26px; position: absolute; top: 13px; left: 15px; border-width: 3px; border-style: solid; border-color: rgba(51, 54, 58, 0.4) transparent; border-radius: 13px; transform-origin: 50% 50% 0px; transition: transform 700s linear 0s; transform: rotate(360000deg);"></div></div></div></div>
    
  </div>


      </footer>
    
  </article>

    </div>

      </div>

      <footer id="colophon"><span class="copyright-year">
    
        ©
    
        2012 -
    
    2017
    <span class="footer-author">Henry Huang.</span>
    <span class="power-by">
        Powered by <a class="hexo-link" href="https://hexo.io/">Hexo</a> and <a class="theme-link" href="https://github.com/henryhuang/hexo-theme-polarbearsimple">Polar Bear Simple</a>
    </span>
</span>

      </footer>

      <div class="back-to-top" id="back-to-top" style="display: block;">
        <i class="iconfont icon-up"></i>
      </div>
    </div>
    

<script type="text/javascript">
  var disqus_shortname = 'huangyijie';
  var disqus_identifier = '2016/10/08/js-window-print-blank/';

  var disqus_title = "JavaScript执行window.print()打印内容为空白";


  var disqus = {
    load : function disqus(){
        if(typeof DISQUS !== 'object') {
          (function () {
          var s = document.createElement('script'); s.async = true;
          s.type = 'text/javascript';
          s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
          (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
          }());
          $('#load-disqus').remove(); ///加载后移除按钮
        }
    }
  }

  
    var disqus_config = function () {
        this.page.url = disqus_url;
        this.page.identifier = disqus_identifier;
        this.page.title = disqus_title;
    };
  

</script>


    




  
    <script type="text/javascript" src="dic_files/jquery-3.js"></script>
  

  

    <script type="text/javascript" src="dic_files/theme.js"></script>
<script type="text/javascript" src="dic_files/bootstrap.js"></script>

  

<iframe style="display: none;"></iframe></body></html>